<template>
    <div>

        <div style="height: 20px;"/>
        <el-avatar :size="70" :src="ico"/>
        <div style="height: 20px;"/>
        <el-tag :type="powerT">{{ powerN }}</el-tag>
        <div style="height: 30px;"/>
        <span style="font-size: 20px;font-color:#fff;">{{userName}}</span>

        <div style="height: 20px;"/>



        <div>
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    router
                    active-text-color="#ffd04b">



                <el-menu-item index="hello" >
                    <i class="el-icon-s-home"/>
                    <span slot="title">首页</span>
                </el-menu-item>

                <el-menu-item @click="applySuccess" v-if="powerT == 'info'">
                    <i class="el-icon-s-check"/>
                    <span slot="title">申请认证</span>
                </el-menu-item>

                <el-menu-item index="userMessage">
                    <i class="el-icon-user-solid"/>
                    <span slot="title">个人信息</span>
                </el-menu-item>


                <el-menu-item index="displayMyPost" >
                    <i class="el-icon-menu"/>
                    <span slot="title">我的帖子</span>
                </el-menu-item>

                <el-menu-item index="allPlate">
                    <i class="el-icon-s-order"/>
                    <span slot="title">所有板块</span>
                </el-menu-item>

                <el-menu-item index="admin" v-show="power == 2">
                    <i class="el-icon-setting"/>
                    <span slot="title">管理界面</span>
                </el-menu-item>

                <el-menu-item index="search" >
                    <i class="el-icon-search"/>
                    <span slot="title">搜索窗口</span>
                </el-menu-item>

                <el-menu-item @click="quit">
                    <i class="el-icon-switch-button"/>
                    <span slot="title">安全退出</span>
                </el-menu-item>

            </el-menu>
        </div>

        <div v-if="false">
            <el-menu router class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                     active-text-color="#545c64" @open="handleOpen" @close="handleClose">

                <el-menu-item index="hello" @click="">
                    <i class="el-icon-s-home"/>
                    <span slot="title">首页</span>
                </el-menu-item>


                <el-menu-item index="userMessage" @click="">
                    <i class="el-icon-user-solid"/>
                    <span slot="title">个人信息</span>
                </el-menu-item>
                <el-menu-item index="displayMyPost" @click="">
                    <i class="el-icon-menu"/>
                    <span slot="title">我的帖子</span>
                </el-menu-item>

                <el-menu-item index="3" @click="allPlate">
                    <i class="el-icon-s-order"/>
                    <span slot="title">所有板块</span>
                </el-menu-item>

                <el-menu-item index="admin" v-show="power == 2">
                    <i class="el-icon-setting"/>
                    <span slot="title">管理</span>
                </el-menu-item>

                <el-menu-item index="search" >
                    <i class="el-icon-setting"/>
                    <span slot="title">搜索</span>
                </el-menu-item>

                <el-menu-item @click="quit">
                    <i class="el-icon-setting"/>
                    <span slot="title">退出</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
    export default {
        name: "menu",
        created: function f() {
            this.$axios
                .get('/api/user/getMsg')
                .then((req)=>{
                    const tmp = req.data.data;
                    console.log(tmp);
                    // 若有头像信息，装载 ico
                    if(tmp.ico){
                        this.ico = tmp.ico;
                        localStorage.setItem('ico',this.ico);
                    }
                    this.userName = tmp.name;
                    localStorage.setItem('userName',tmp.name);

                    const power = parseInt(tmp.power);
                    localStorage.setItem('power',power+'');
                    this.powerT = this.powerType[power];
                    this.powerN = this.powerName[power];
                })
        },
        data(){
            return{
                userName:'获取用户姓名中...',
                powerType: ["info", "success", "warning", "danger"],
                powerName: ["未认证用户", "认证用户", "管理员", "封禁用户"],
                powerT: "info",
                powerN: "未认证用户",
                ico:
                    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },
        props:['power'],
        methods:{
            applySuccess:function(){
                this.$axios.post("/api/user/update",{
                    power:"00"
                })
                    .then(req=>{
                        this.$message.success("已交由管理员审核");
                    })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            quit:function () {
                localStorage.removeItem('token');
                this.$router.push('/');
            }
        }
    }
</script>

<style scoped>

</style>
